<template>
  <div class="image-preview">
    <div class="image-container">
      <img :src="imgSrc" draggable="false" ref="imgRef" />
    </div>
    <div v-if="zoom !== 1" class="reset-button" @click="reset"> 还原图片比例</div>
    <button @click="zoomIn">放大</button>
    <button @click="zoomOut">缩小</button>
  </div>
</template>

<script>
  import imgFile from '@/assets/logo.png';

  export default {
    name: 'ImagePreview',
    data() {
      return {
        zoom: 1,
        imgSrc: imgFile,
        x: 0,
        y: 0,
        transform: {
          scale: 0,
          translateX: 0,
          translateY: 0,
        },
      };
    },
    // props: {
    //   imgSrc: String,
    // },
    mounted() {
      //
    },
    methods: {
      reset() {
        //
      },
      onMousedown(event) {
        // 在鼠标按下时，监听鼠标移动事件
        document.addEventListener('mousemove', this.onMousemove);
      },
      onMouseup() {
        document.removeEventListener('mousemove', this.onMousemove);
      },
      async onMousemove(event) {
        // 获取图片的当前位置
        const { x, y } = event.target.getBoundingClientRect();

        // 获取鼠标的当前位置
        const mouseX = event.clientX;
        const mouseY = event.clientY;

        // 计算鼠标拖动的距离
        const dx = mouseX - x;
        const dy = mouseY - y;

        // 获取图片的高度和宽度
        const imgHeight = event.target.height;
        const imgWidth = event.target.width;

        // 获取容器的高度和宽度
        const containerHeight = event.target.parentElement.clientHeight;
        const containerWidth = event.target.parentElement.clientWidth;

        // 计算图片在容器中的位置
        const imgTop = y + dy;
        const imgLeft = x + dx;
        const imgRight = imgLeft + imgWidth;
        const imgBottom = imgTop + imgHeight;

        // 使用 Math.min() 和 Math.max() 函数限制图片移动的范围
        const newDx = Math.max(0, Math.min(imgWidth - containerWidth, dx));
        const newDy = Math.max(0, Math.min(imgHeight - containerHeight, dy));

        // 使用 JavaScript 的 translate 函数移动图片
        event.target.style.transform = `translate(${newDx}px, ${newDy}px)`;
      },
      zoomIn() {
        // 使用 JavaScript 的 zoom 函数放大图片
        // 并增加 zoom 变量的值
      },
      zoomOut() {
        // 使用 JavaScript 的 zoom 函数缩小图片
        // 并减小 zoom 变量的值
      },
    },
  };
</script>

<style>
  .image-preview {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .image-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .reset-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
  }

  .reset-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }
</style>
